import React from 'react';
import { Card, Typography } from 'antd';
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
import config from '@/api/GlobalConfig';

const { Meta } = Card;
const { Paragraph, Text } = Typography;

function ArtCard({
  cardInfo,
}: {
  cardInfo: { artist: string; create_time: string; description: string; name: string; url: string };
}) {
  return (
    <Card
      style={{ width: '100%', marginBottom: 25 }}
      bodyStyle={{ borderRadius: 25 }}
      hoverable
      cover={
        <img
          alt={cardInfo.description}
          src={`${config.imageUrl}${cardInfo.url}`}
          // src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
        />
      }
      actions={[
        <div style={{ display: 'flex', justifyContent: 'space-between', paddingLeft: 10, paddingRight: 10 }}>
          <div>{cardInfo.artist}</div>
          <div>{cardInfo.create_time}</div>
        </div>,
      ]}
    >
      <Meta
        title={cardInfo.name}
        description={
          <Paragraph
            style={{ minHeight: 45, color: '#828282' }}
            ellipsis={{ rows: 2, expandable: true, symbol: <div style={{ color: '#4f4f4f' }}>查看更多</div> }}
          >
            {cardInfo.description}
          </Paragraph>
        }
      />
    </Card>
  );
}

export default ArtCard;
